<!---->
<template>
  <div class="add-block">
    <table class="wy-table">
      <tr>
        <td>
          账号
        </td>
        <td>
          suyue
        </td>
        <td rowspan="3">
          头像
        </td>
        <td rowspan="3">
          <el-upload size="mini" class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </td>
      </tr>
      <tr>
        <td>
          姓名
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user2" style="width:50%"></el-input>
        </td>
      </tr>
      <tr>
        <td>
          手机号
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user3" style="width:50%"></el-input>
        </td>

      </tr>
      <tr>
        <td>
          密码
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user4" style="width:50%"></el-input>
          <span class="password-type">（如不需更改，则不用填写）</span>
        </td>
        <td>
          婚否
        </td>
        <td>
          <el-select size="mini" v-model="formInline.user5" style="width:50%">
            <el-option value="未婚"></el-option>
            <el-option value="已婚"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>
          确认密码
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user6" style="width:50%"></el-input>
        </td>
        <td>
          QQ
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user7" style="width:50%"></el-input>
        </td>
      </tr>
      <tr>
        <td>
          部门
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user8" style="width:50%"></el-input>
          <span class="select-type" @click="handleClick1()"> 选择</span>
        </td>
        <td>
          入职日期
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user9" style="width:50%"></el-input>
        </td>
      </tr>

      <tr>
        <td>
          类型
        </td>
        <td>
          <el-select size="mini" v-model="formInline.user10" style="width:50%">
            <!-- <el-option value="未婚"></el-option> -->
          </el-select>
        </td>
      </tr>
      <tr>
        <td>
          他的领导
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user11" style="width:50%"></el-input>
          <span class="select-type"  @click="handleClick2()"> 选择</span>
        </td>
        <td>
          邮政编码
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user12" style="width:50%"></el-input>
        </td>
      </tr>

      <tr>
        <td>
          地址
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user13" style="width:50%"></el-input>
        </td>
      </tr>
      <tr>
        <td>
          性别
        </td>
        <td>
          <el-radio v-model="formInline.user14" label="男">男</el-radio>
          <el-radio v-model="formInline.user14" label="女">女</el-radio>
        </td>
        <td>
          出生日期
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user15" style="width:50%"></el-input>
        </td>
      </tr>

      <tr>
        <td>
          E-mail
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user16" style="width:50%"></el-input>
        </td>
        <td>
          身份证号码
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user17" style="width:50%"></el-input>
        </td>
      </tr>

      <tr>
        <td>
          兴趣爱好
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user18" style="width:50%"></el-input>
          
        </td>
        <td>
          电话
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user19" style="width:50%"></el-input>
        </td>
      </tr>
      <tr>
        <td>
          网盘份额
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user20" style="width:50%"></el-input>
          <span> 字节</span>
        </td>
        <td>
          内部邮箱份额
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user21" style="width:50%"></el-input>
          <span> 字节</span>
        </td>
      </tr>
      <tr>
        <td>
          员工编码
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user22" style="width:50%"></el-input>
        </td>
        <td>
          短号
        </td>
        <td>
          <el-input size="mini" v-model="formInline.user23" style="width:50%"></el-input>
        </td>
      </tr>
    </table>
    <div class="primary-determine">
      <el-button type="primary">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue';
export default {
  setup() {
    const state = reactive({
      formInline: {
        user: '',
        region: '',
        
        user5: '未婚',
        user14: '男'
      },
      imageUrl: '',
    });
    // 页面加载时
    onMounted(() => {
    });
    return {
      ...toRefs(state),
    };
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleClick1(){
      console.log('213213',21323)
      this.$emit('handleClick',1)
    },
    handleClick2(){
      this.$emit('handleClick',2)
    },
  },
};
</script>


<style lang='scss' scoped>
@import './config.scss';
</style>